<template>
  <div class="ml-dialog">
    <div class="ml-dialog-box ld ld-throw-btt-in"
         :class="{'light':light}"
    >
      <div class="ml-dialog-head">
        {{ title }}
        <i class="fa fa-close ml-auto pointer ld ld-tremble ld-by-hover" @click="$emit('close')"></i>
      </div>
      <div class="ml-dialog-body"
           :class="{'light':light}"
      >
        <slot></slot>
      </div>
      <div class="ml-dialog-foot"
           :class="{'light':light}"
      >
        <slot name="foot"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MilkDialog',
  props: {
    title: String,
    light: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    const body = document.querySelector('body')
    if (body.append) {
      body.append(this.$el)
    } else {
      body.appendChild(this.$el)
    }

  },
  methods: {
    handleInput (event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

<style>
/*Dialog S*/
.ml-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .75);
  z-index: 999;
}

.ml-dialog-box {
  position: relative;
  padding: 52px 0 54px;
  width: 420px;
  height: 230px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #363a3e;
}

.ml-dialog-box.light {
  background-color: #FFFFFF;
  color: #2e333a;
}

.ml-dialog-head {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 10px 16px;
  /*background-color: #292c2f;*/
  font-weight: 600;
  font-size: 14px;
  color: white;
}

.ml-dialog-box.light .ml-dialog-head{
  color: #2e333a;
}

.ml-dialog-body {
  width: 100%;
  height: 100%;
  padding: 6px 16px;
}

.ml-dialog-foot {
  position: absolute;
  width: 100%;
  height: 54px;
  bottom: 0;
  background-color: #2f3136;
  box-shadow: inset 0 1px 0 rgba(47, 49, 54, .6);
  padding: 0 16px;
}

.ml-dialog-foot.light {
  background-color: #FFFFFF;
}

/*Dialog E*/
</style>
